@extends('layouts.app', ['activePage' => 'clubs', 'titlePage' => __('俱乐部管理')])
@section('content')
  <div class="content">
    <div class="container-fluid">
      <div class="card">
        <div class="card-header card-header-primary">
          <h4 class="card-title">俱乐部列表</h4>
        </div>

        <div class="card-body ">

          @if (session('message'))
            <div class="row">
              <div class="col-sm-12">
                <div class="alert alert-success">
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <i class="material-icons">close</i>
                  </button>
                  <span>{{ session('message') }}</span>
                </div>
              </div>
            </div>
          @endif
          <div class="row justify-content-between">
            <div class="col-md-auto mr-auto">
              <ul class="nav">
                <li class="nav-item">
                  <a class="nav-link active" href="?type">全部({{$countAll}})</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="?type=0">正常({{$countStatus0}})</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="?type=1">屏蔽({{$countStatus1}})</a>
                </li>
              </ul>
            </div>
            <div class="col-auto">
              <form class="navbar-form navbar-search" method="get">
                <div class="input-group no-border">
                  <input type="text" name="search" class="form-control" placeholder="搜索俱乐部...">
                  <button type="submit" class="btn btn-white btn-round btn-just-icon">
                    <i class="material-icons">search</i>
                    <div class="ripple-container"></div>
                  </button>
                </div>
              </form>
            </div>
            <div class="col-auto">
              <a href="{{ route('clubs.create') }}" class="btn btn-sm btn-primary"><i
                  class="material-icons">add</i>新建俱乐部</a>
            </div>
          </div>
          <table class="table">
            <thead>
            <tr class="text-center text-primary">
              <th>#</th>
              <th>Logo</th>
              <th>俱乐部</th>
              <th>简介</th>
              <th>位置</th>
              <th>电话</th>
              <th>创建时间</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
            </thead>
            @foreach ($clubs as $club)
              <tbody>
              <tr id="club-{{ $club->id }}">
                <td>{{ $loop->iteration }}</td>
                <td><img src="{{ $club->image }}" class="mx-auto d-block" width="50px" height="50px"></td>
                <td class="text-center">{{ $club->club_name }}</td>
                <td class="text-truncate" style="max-width: 200px">{{ $club->intro}}</td>
                <td>经度：{{ $club->longitude }}<br>纬度：{{ $club->latitude }}</td>
                <td>{{ $club->tel }}</td>
                <td class="table-col-created-at">
                  {{ $club->created_at->toDateTimeString() }}
                </td>
                <td class="text-center table-col-status">
                  @switch($club->status)
                    @case(0)
                    <span class="badge badge-success">正常</span>@break
                    @case(1)
                    <span class="badge badge-default">屏蔽</span>@break
                    @default
                    未知状态
                  @endswitch
                </td>
                <td class="td-actions text-right">
                  <a rel="tooltip" class="btn btn-success btn-link btn-club-status" href="javascript:"
                     data-club-status={{ $club->status }} data-club-id={{ $club->id }}>
                    {{ ($club->status === 0)?'屏蔽':'解除屏蔽' }}
                    <div class="ripple-container"></div>
                  </a>
                </td>
              </tr>
              </tbody>
            @endforeach

          </table>

        </div>
      </div>
    </div>
  </div>
@endsection

@push('js')
  <script>
      $('.btn-club-status').on('click', function () {
          let id = $(this).attr('data-club-id');
          let status = $(this).attr('data-club-status');
          axios.patch(`/clubs/${id}/status`, {
              status: status > 0 ? 0 : 1
          }).then(res => {
              if (res.status === 200)
                  return res.data;
              else
                  reject(new Error(`[${res.status}]${res.statusText}: ${res.data}`));
          }).then(data => {
              console.log(data);
              let s = null;
              switch (data.status) {
                  case 0:
                      s = '<span class="badge badge-success">正常</span>';
                      $(`#club-${id} .btn-club-status`).text('屏蔽');
                      break;
                  case 1:
                      s = '<span class="badge badge-default">屏蔽</span>';
                      $(`#club-${id} .btn-club-status`).text('解除屏蔽');
                      break;
                  default:
                      console.log('Unknown status result: ' + s);
              }
              $(`#club-${id} .table-col-status`).html(s);
            {{-- $(`#club-${id} .btn-club-edit`).hide(); --}}
            $(this).attr('data-club-status', data.status);
          }).catch(e => console.log(e));
      });
  </script>
@endpush
